<template>
  <div class="unitStatistics">
    <span class="unitStatistics-title">
      单位统计
      <img src="/static/img/large.png" title="全屏展示" class="full-btn" />
    </span>
    <div id="unitStatistics-contents"></div>
  </div>
</template>
<script>
import { elecSandTableApi } from "@/services/WorkCenter";
export default {
  data() {
    return {
      echartStyle: {},
      xAxis: [],
      yAxis: []
    };
  },
  methods: {
    //获取图表数据
    getEchartData() {
      elecSandTableApi
        .getUnitTypeData({
          params: {
            field: "cp_type"
          }
        })
        .then(res => {
          res.data.filter(item => {
            this.yAxis.push(item.name);
            this.xAxis.push(item.total);
          });
          this.initCharts();
        })
        .catch(error => {
          console.log(error);
        });
    },
    //初始化图表
    initCharts() {
      let Chart = this.$echarts.init(
        document.getElementById("unitStatistics-contents")
      );
      // 绘制图表
      Chart.resize();
      this.echartStyle = {
        legend: {
          show: false,
          data: this.id
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        colors: [
          "#52cfc5",
          "#b85ee4",
          "#c39748",
          "#d1d74c",
          "#d74088",
          "#6359e1",
          "#db7459",
          "#61d857"
        ],
        grid: {
          left: "3%",
          right: "4%",
          bottom: "8%",
          containLabel: true
        },
        xAxis: [
          {
            splitLine: { show: false }, //去除网格线
            type: "value",
            interval: 0,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#fff",
                fontSize: this.fontSize
              }
            }
          }
        ],
        yAxis: [
          {
            interval: 0,
            type: "category",
            data: this.yAxis,
            axisLabel: {
              // formatter: '{value}',
              textStyle: {
                color: "#fff",
                fontSize: this.fontSize
              }
            },
            axisTick: {
              show:false
            },
            axisLine:{
                show:false
            }
          }
        ],
        series: [
          {
            name: " ",
            type: "bar",
            data: this.xAxis,
            // dimensions:this.id,
            barMaxWidth: 40,
            itemStyle: {
              //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
              emphasis: {
                barBorderRadius: 30
              },

              normal: {
                color: function(params) {
                  var colorList = [
                    "#ffff28",
                    "#a4fe59",
                    "#02ff69",
                    "#00fff9",
                    "#20e6ff",
                    "#0ac7ff",
                    "#0e83ef"
                  ];
                  return colorList[params.dataIndex];
                },
                //柱形图圆角，初始化效果
                barBorderRadius: [5]
              }
            }
          }
        ]
      };
      Chart.setOption(this.echartStyle);
      window.addEventListener("resize", function() {
        Chart.resize();
      });
    }
  },
  mounted() {
    this.getEchartData();
  }
};
</script>
<style lang="scss" scoped>
.unitStatistics {
  .unitStatistics-title {
    color: white;
    font-size: 16px;
    padding-left: 3%;
    display: block;
    margin: 1vh 2% 0 2%;
    background: #2b66b7;
    opacity: 30%;
    position: relative;
    .full-btn {
      position: absolute;
      right: 5px;
      top: 3px;
      cursor: pointer;
    }
  }
  #unitStatistics-contents {
    width: 100%;
    height: 88%;
    padding: 0 5px;
  }
}
</style>